<template>
    <div class="table">
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>接口列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="el-icon-plus" class="handle-del mr10" @click="addEdit">新建</el-button>
            </div>
            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="formInLine">
                    <el-form-item label="接口名称:">
                        <el-input v-model="formInline.name" placeholder="请输入接口名称"></el-input>
                    </el-form-item>
                    <el-form-item label="接口路由:">
                        <el-input v-model="formInline.apis" placeholder="请输入接口路由">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="所属分组:">
                        <el-select v-model="formInline.pid" placeholder="请选择所属分组" style="width: 100%;">
                            <el-option v-for="item in allPermissionGroups" :key="item.id" :label="item.name"
                                       :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="resetForm">重置</el-button>
                        <el-button type="primary" @click="submitQueryForm">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable">
                <el-table-column v-for="(item,index) in tableLabel" :key="item.id" :prop="item.prop" :width="item.width"
                                 :label="item.label">
                </el-table-column>

                <el-table-column label="操作" width="220" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" plain size="mini" icon="el-icon-edit"
                                   @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>


        <!-- 添加弹出框 -->
        <el-dialog v-dialogDrag :title="title" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="100px" :rules="rules">
                <el-form-item label="接口名称:" prop="name">
                    <el-input v-model="form.name" placeholder="请输入接口名称"></el-input>
                </el-form-item>
                <el-form-item label="所属分组:" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择所属分组" style="width: 100%;">
                        <el-option v-for="item in permissionGroups" key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="接口路由:" prop="apis">
                    <el-input v-model="form.apis" placeholder="请输入接口路由"></el-input>
                </el-form-item>
                <el-form-item label="接口描述:" prop="des">
                    <el-input v-model="form.des" placeholder="请输入接口描述"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="saveEdit" v-if="isEdit" v-preventReClick>保 存</el-button>
				<el-button type="primary" @click="saveEdit" v-else v-preventReClick>确 定</el-button>
			</span>
        </el-dialog>

    </div>
</template>

<script>
import common from "../../common/common";

export default {
    data() {
        return {
            title: '添加接口',
            editVisible: false, //默认弹框隐藏
            delVisible: false, //默认删除提示框隐藏
            // 表头标题数据
            tableLabel: [
                {label: '序号', width: '60', prop: 'xuHao'},
                {label: '接口名称', width: '', prop: 'name'},
                {label: '所属分组', width: '', prop: 'permission_group.name'},
                {label: '接口路由', width: '', prop: 'apis'},
                {label: '接口描述', width: '', prop: 'des'},

            ],
            formInline: {},//搜索表单
            isEdit: false, //编辑确认按钮默认隐藏
            // 弹框表单
            form: {
                name: '',
                pid: '',
                apis: '',
                des: ''
            },
            rules: {
                name: [{required: true, message: "请输入接口名称",trigger:'blur'}],
                pid: [{required: true, message: "请选择接口分组",trigger:'blur'}],
                apis: [{required: true, message: "请输入接口路由",trigger:'blur'}],
            },
            loading: false,
            id: '',
            page: 1,
            limit: 10,
            total: 0,
            params: {
                page: 1,
                per_page: 10
            },
            locationList: [],//列表数据
            allPermissionGroups: [],//权限接口分组数据
            permissionGroups: [],
        }
    },
    created() {
        this.getLocationList();
        this.getPermissionGroupList();
    },
    activated() {
        this.getLocationList();
        this.getPermissionGroupList();
    },

    methods: {
        // 分页
        handleSizeChange(size) {
            this.params.per_page = size;
            this.getLocationList();
        },
        handleCurrentChange(index) {
            this.params.page = index;
            this.getLocationList();
        },
        // 点击查询按钮
        submitQueryForm() {
            this.params = {
                page: 1,
                per_page: this.params.per_page,
                name: this.formInline.name,
                apis: this.formInline.apis,
                pid: this.formInline.pid,
            }
            this.getLocationList();
        },
        // 点击重置按钮
        resetForm() {
            this.formInline.nickname = '';
            this.formInline.role_id = '';
        },
        getLocationList() {
            common.getQueryList(this.$api.permissions, this.params, this);
        },
        getPermissionGroupList() {
            this.$get(this.$api.permissionGroups, {per_page: 1000}).then(res => {
                if (res.code == 200) {
                    this.permissionGroups = [...res.data.data];
                    res.data.data.unshift({id: -1, name: '全部'});
                    this.allPermissionGroups = res.data.data;
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 点击新建按钮
        addEdit() {
            this.title = '添加权限接口';
            this.form = this.$options.data().form;
            this.editVisible = true;
            this.isEdit = false;
        },
        // 点击确定按钮
        saveEdit() {
            let params = {
                name: this.form.name,
                pid: this.form.pid,
                apis: this.form.apis,
                des: this.form.des,
            }
            if (this.$isEmpty(params.name)) {
                return this.$message.error('请输入接口名称');
            }
            if (this.$isEmpty(params.pid)) {
                return this.$message.error('请选择所属分组');
            }
            if (this.$isEmpty(params.apis)) {
                return this.$message.error('请输入接口路由');
            }
            if (!this.isEdit) {
                common.addData(this.$api.permissions, params, this);
            } else {
                common.editData(this.$api.permissions + '/' + this.id, params, this);

            }

        },
        // 点击编辑按钮
        handleEdit(index, row) {
            this.editVisible = true;
            this.isEdit = true;
            this.title = '编辑权限接口';
            this.id = row.id;
            this.form = row;
        },
        // 点击删除按钮
        handleDelete(index, row) {
            let tip = '此操作将删除该权限接口, 是否继续?';
            common.deleteData(this.$api.permissions + '/' + row.id, tip, this);
        },
    }
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.avatar-uploader {
    margin-top: 20px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
}

.avatar-uploader:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: flex;
}
</style>
